<template>
	<view class="calendar-content" v-if="showCalendar">
		<view>
			<!-- 插入模式 -->
			<uni-calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false"
				/>
		</view>
	</view>
	<view class="stusta">
		<view class="">
			今天，你学习了1小时20分钟
		</view>
		<view class="">
			2020年5月，你一共学习了18天
		</view>
		<view class="">
			2020年，你一共学习了254天
		</view>
		<view class="">
			继续加油，你是最棒的!
		</view>
		<view class="">
			<button open-type="share" class=" iconfont icon-fenxiangtianchong">分享我的学习</button>
		</view>
	</view>
</template>
<script>
	import {
		http
	} from '../../static/utils/http.js';
	export default {

		components: {},
		data() {
			return {
				showCalendar: false,
				isid: '',
				info: {
					lunar: true,
					range: true,
					insert: false,
					selected: []
				},
				tabdate: []
			}
		},
		onLoad(option) {
			this.isid = option.opid
		},
		onReady() {
			this.$nextTick(() => {
				this.showCalendar = true
			})
			// 获取打卡数据
			http({
					url: '/appGetcardTime',
					data: {
						id: this.isid
					},
					method: 'post',
				})
				.then(res => {
					let ac = new Date(res.data.time)
					const y = ac.getFullYear()
					const m = ac.getMonth() + 1 < 10 ? '0' + (ac.getMonth() + 1) : ac.getMonth() +
						1 // 获取当前月份的日期，不足10补0
					const d = ac.getDate() < 10 ? '0' + ac.getDate() : ac.getDate() // 获取当前几号，不足10补0
					const da = y + '-' + m + '-' + d
					let ab = []
					res.data.data.filter(item => {
						return ab.push(item.hitcart_dateTime == da)
					})
					this.tabdate = res.data.data;
					if (ab.length < 1) {
						// 向后端发起打卡请求
						http({
								url: '/appcardtime',
								data: {
									Time: da,
									opid: this.isid
								},
								method: 'post',
							})
							.then(res => {
								console.log(res)
								uni.showToast({
												title: '打卡成功',
												icon:'success',
												duration:850
											});
							}).catch(error => console.log(error))
					}
				}).catch(error => console.log(error))
				setTimeout(()=>{
						this.tabdate=this.tabdate.map(item=>{
								return {
									...item,
									date:item.hitcart_dateTime,
									info:'打卡'
								}
							})
						this.info.selected=this.tabdate;
				},1000)
		},
	}
</script>
<style lang="scss">
	@import url('~@/static/fonts/iconfont.css');

	.example-body {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	.calendar-button {
		flex: 1;
		font-weight: bold;
		font-size: 32rpx;
	}

	.stusta {
		background-color: #f2f2f2;

		view {
			height: 80rpx;
			line-height: 80rpx;
			font-size: 28rpx;

			button {
				display: inline-block;
				font-size: 24rpx;
				height: 50rpx;
				border-radius: 30rpx;
				padding-bottom: 30rpx;
				background-color: #8080FF;
				color: #fff;
			}
		}
	}
</style>
